<template>
  <div class="view">
    <div class="container">
      <!--带筛选表格组件-->
      <table-list
        :data="listData"
        :column-cfg="columnCfg"
        :total-size="totalSize"
        :page-size="filterParams.pageSize"
        :loading="dataLoading"
        @refresh-list="getList"
        @edit-item="handleEditItem"
        @delete-item="handleDeleteItem"
      >
        <div class="view-button">
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="handleItemAdd"
            >新增
          </el-button>
        </div>
      </table-list>
    </div>
    <!--详情对话框-->
    <item-detail ref="itemDetail" @data-change="getList"></item-detail>
  </div>
</template>

<script>
import TableList from '@/components/TableList/index';
import ItemDetail from './components/ItemDetail';

import { list, batchDelete } from '@/api/system/dictionary';
import ListAction from '@/views/_mixins/list-action';

export default {
  name: 'DictionaryManage',
  mixins: [ListAction],
  components: {
    TableList,
    ItemDetail,
  },
  data() {
    return {
      list: list,
      batchDelete: batchDelete,
      filterParams: { pageSize: 10 }, //筛选条件，每次更新会保存使用的筛选条件
      columnCfg: {
        value: { label: '数据值', width: '100', align: 'center' },
        label: { label: '标签名' },
        type: { label: '类型', filter: { type: 'input' } },
        description: { label: '描述' },
        sort: { label: '排序', width: '100', align: 'center' },
        ':action': {
          label: '操作',
          width: '140',
          actionArr: [
            {
              label: '编辑',
              event: 'edit-item',
              btnType: '',
            },
            {
              label: '删除',
              event: 'delete-item',
              btnType: 'danger',
            },
          ],
        },
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.view {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 16px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  &::-webkit-scrollbar-track-piece {
    background: rgba(200, 200, 200, 0.1);
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 8px;
    background: rgba(200, 200, 200, 0.5);
  }
}
</style>
